import React, { Component } from 'react';
import InvoiceType from '@/components/invoiceType';
import InvoiceStatus from '@xforceplus/invoice-status';
import '@xforceplus/invoice-status/dist/index.css';
import { Row, Col, Table, Tooltip, Popover, Icon } from 'antd';
//------------------------------------------------
// mapping ro func
import { conversion, formatMyCurrency } from './moduleUtils'
import { tipDetail } from './mapping.js'
//------------------------------------------------
import './tablecontainer.scss';

class TableContainer extends Component {
  state = {
    columns: [
      {
        key: 'id',
        dataIndex: 'id',
        width: 30,
        render: (text, record) => {
          return (<span className={"table-tip"}>
            <Tooltip title={tipDetail[record.interfaceType].detail}>
              <div className="tip-top">{tipDetail[record.interfaceType].tip}</div>
            </Tooltip>
            <div className="" style={{width:'16px',height:'16px'}}> </div>{/*二期可能会要加一个 "转" 样式要自己写啦*/}
          </span>
          )
        },
      }, {
        key: 'code',
        dataIndex: 'code',
        render: (text, record) => {
          // console.log(`record-------->`, record)
          const view = {}
          switch (record.interfaceType) {
            case 1:
              conversion('batchNo', 'bussinessNo', record, tipDetail, view)
              break;
            case 2:
              conversion('invoiceNo', 'invoiceCode', record, tipDetail, view)
              break;
            case 3:
              conversion('attachmentName', '', record, tipDetail, view)
              break;
            case 4:
              conversion('invoiceNo', 'invoiceCode', record, tipDetail, view)
              break;
          }
          return (<Row>
            <Col>
              {view.tFlag ? <React.Fragment>
                <span>{view.tInfo}：</span>
                <span>{view.tRecord}</span>
              </React.Fragment> : <div className="text-center">-</div>}
            </Col>
            <Col>
              {view.bFlag ? <React.Fragment>
                <span>{view.bInfo}：</span>
                <span>{view.bRecord}</span>
              </React.Fragment> : <div className="text-center">-</div>}
            </Col>
          </Row>
          )
        },
      }, {
        dataIndex: 'invoice',
        key: 'invoice',
        render: (text, record) => {
          // console.log(`record-------->`, record)
          const view = {}
          switch (record.interfaceType) {
            case 1:
              conversion('', '', record, tipDetail, view)
              break;
            case 2:
              conversion('invoiceType', 'invoiceSheet', record, tipDetail, view)
              break;
            case 3:
              conversion('', '', record, tipDetail, view)
              break;
            case 4:
              conversion('invoiceType', 'invoiceSheet', record, tipDetail, view)
              break;
          }
          return (<Row>
            <Col>
              {view.tFlag ? <React.Fragment>
                <span>{view.tInfo}：</span>
                <InvoiceType type={view.tRecord} key={'1'} />
              </React.Fragment> : <div className="text-center">-</div>}
            </Col>
            <Col>
              {view.bFlag ? <React.Fragment>
                <span>{view.bInfo}：</span>
                <InvoiceStatus status={view.bRecord === 2 ? 3 : view.bRecord} type="INVOICE_JOINTS" />{/*-----------记账联定向到抵扣联----------*/}
              </React.Fragment> : <div className="text-center">-</div>}
            </Col>
          </Row>
          )
        },
      }, {
        dataIndex: 'type',
        key: 'type',
        render: (text, record) => {
          record.amountWithTax = formatMyCurrency(record.amountWithTax, 2)
          const view = {}
          switch (record.interfaceType) {
            case 1:
              conversion('bussinessType', 'amountWithTax', record, tipDetail, view)
              break;
            case 2:
              conversion('amountWithTax', 'paperDrewDate', record, tipDetail, view)
              break;
            case 3:
              conversion('', '', record, tipDetail, view)
              break;
            case 4:
              conversion('detailNum', 'paperDrewDate', record, tipDetail, view)
              break;
          }
          return (<Row>
            <Col>
              {view.tFlag ? <React.Fragment>
                <span>{view.tInfo}：</span>
                <span>{view.tRecord}</span>
              </React.Fragment> : <div className="text-center">-</div>}
            </Col>
            <Col>
              {view.bFlag ? <React.Fragment>
                <span>{view.bInfo}：</span>
                <span>{view.bRecord}</span>
              </React.Fragment> : <div className="text-center">-</div>}
            </Col>
          </Row>
          )
        },
      }, {
        dataIndex: 'company',
        key: 'company',
        render: (text, record) => {
          const view = {}
          switch (record.interfaceType) {
            case 1:
              conversion('senderCompanyName', 'receiverCompanyName', record, tipDetail, view, record.senderRole)
              break;
            case 2:
              conversion('senderCompanyName', 'receiverCompanyName', record, tipDetail, view, record.senderRole)
              break;
            case 3:
              conversion('senderCompanyName', 'receiverCompanyName', record, tipDetail, view, record.senderRole)
              break;
            case 4:
              conversion('senderCompanyName', 'receiverCompanyName', record, tipDetail, view, record.senderRole)
              break;
          }
          return (<Row>
            <Col>
              {view.tFlag ? <React.Fragment>
                <span>{view.tInfo}：</span>
                <span>{view.tRecord}</span>
              </React.Fragment> : <div className="text-center">-</div>}
            </Col>
            <Col>
              {view.bFlag ? <React.Fragment>
                <span>{view.bInfo}：</span>
                <span>{view.bRecord}</span>
              </React.Fragment> : <div className="text-center">-</div>}
            </Col>
          </Row>
          )
        },
      }, {
        dataIndex: 'name',
        key: 'name',
        render: (text, record) => {
          const view = {}
          switch (record.interfaceType) {
            case 1:
              conversion('receiverName', 'principalName', record, tipDetail, view)
              break;
            case 2:
              conversion('receiverName', 'principalName', record, tipDetail, view)
              break;
            case 3:
              conversion('receiverName', 'principalName', record, tipDetail, view)
              break;
            case 4:
              conversion('receiverName', 'principalName', record, tipDetail, view)
              break;
          }
          return (<Row>
            <Popover placement="topLeft" content={<div><p>{record.receiverName}  {record.receiverTel || '--'}</p><p>{record.receiverAddr || '--'}</p></div>} arrowPointAtCenter>
              <Col>
                {view.tFlag ? <React.Fragment>
                  <span>{view.tInfo}：</span>
                  <span className="text-overflow" style={{maxWidth:'70px'}}>{view.tRecord}</span>
                </React.Fragment> : <div className="text-center">-</div>}
              </Col>
              <Col>
                {view.bFlag ? <React.Fragment>
                  <span>{view.bInfo}：</span>
                  <span>{view.bRecord}</span>
                </React.Fragment> : <div className="text-center">-</div>}
              </Col>
            </Popover>
          </Row>
          )
        },
      }, {
        dataIndex: 'source',
        key: 'source',
        render: (text, record) => {
          const view = {}
          switch (record.interfaceType) {
            case 1:
              conversion('goodsOrig', 'goodsUrl', record, tipDetail, view)
              break;
            case 2:
              conversion('goodsOrig', 'goodsUrl', record, tipDetail, view)
              break;
            case 3:
              conversion('goodsOrig', 'goodsUrl', record, tipDetail, view)
              break;
            case 4:
              conversion('goodsOrig', 'goodsUrl', record, tipDetail, view)
              break;
          }
          return (<Row>
            <Col>
              {view.tFlag ? <React.Fragment>
                <span>{view.tInfo}：</span>
                <span>{tipDetail[record.interfaceType][view.tRecord]}</span>
              </React.Fragment> : <div className="text-center">-</div>}
            </Col>
            <Col>
              {view.bFlag ? <React.Fragment>
                <span>{view.bInfo}：</span>
                <a href={view.bRecord} target="_blank"><Icon type="file-jpg" /></a>
              </React.Fragment> : <div className="text-center">-</div>}
            </Col>
          </Row>
          )
        },
      }
    ]
  }

  render() {
    const {
      dataSource,//数据
      selectedRowKeys,
      chgSelectedRowKeys//
    } = this.props;
    const { columns } = this.state
    const rowSelection = {
      selectedRowKeys,
      onChange: chgSelectedRowKeys,
      hideDefaultSelections: true,
    };
    return (
      <React.Fragment>
        <Table
          // scroll={{ y: 300 }}
          rowKey="id"
          rowSelection={rowSelection}
          showHeader={false}
          columns={columns}
          pagination={false}
          dataSource={dataSource} />
      </React.Fragment>
    );
  }
};

export default TableContainer;
